<script setup>
import { watch, reactive } from 'vue'
import { DragHandle, SlickItem, SlickList } from 'vue-slicksort'

const props = defineProps({
  currRow: Object,
})

const emit = defineEmits([
  'updateSql',
])

const currRow = ref(props.currRow)
const formatSql = ref(true)

const sqlJson = currRow.value.sqlJson ? JSON.parse(currRow.value.sqlJson) : {}

// column
const columnJson = ref(sqlJson.column || [])
const columnIndex = ref(columnJson.length || 1)
const columnOption = reactive([])
const columnList = ref(columnJson.value)

const columnAddItem = () => {
  columnList.value.push({ "index": columnIndex, "type": null, "column": null })
  columnIndex.value ++
}

const columnDeleteItem = index => {
  columnList.value.splice(index, 1)
}

watch(columnList.value, (newVal, oldVal) => {
  buildQuery()
})

// where
const whereJson = ref(sqlJson.where || [])
const whereIndex = ref(whereJson.length || 1)
const whereOption = reactive([])
const whereList = ref(whereJson.value)

const whereAddItem = () => {
  whereList.value.push({ "index": whereIndex, "type": null, "column": null })
  whereIndex.value ++
}

const whereDeleteItem = index => {
  whereList.value.splice(index, 1)
}

watch(whereList.value, (newVal, oldVal) => {
  buildQuery()
})

// group by
const groupByJson = ref(sqlJson.groupBy || [])
const groupByIndex = ref(groupByJson.length || 1)
const groupByOption = reactive([])
const groupByList = ref(groupByJson.value)

const groupByAddItem = () => {
  groupByList.value.push({ "index": groupByIndex, "type": null, "column": null })
  groupByIndex.value ++
}

const groupByDeleteItem = index => {
  groupByList.value.splice(index, 1)
}

watch(groupByList.value, (newVal, oldVal) => {
  buildQuery()
})

// order by
const orderByJson = ref(sqlJson.orderBy || [])
const orderByIndex = ref(orderByJson.length || 1)
const orderByOption = reactive([])
const orderByList = ref(orderByJson.value)

const orderByAddItem = () => {
  orderByList.value.push({ "index": orderByIndex, "type": null, "column": null })
  orderByIndex.value ++
}

const orderByDeleteItem = index => {
  orderByList.value.splice(index, 1)
}

watch(orderByList.value, (newVal, oldVal) => {
  buildQuery()
})

// limit
const limitJson = ref(sqlJson.limit || [])
const limitIndex = ref(limitJson.length || 1)
const limitOption = reactive([])
const limitList = ref(limitJson.value)

const limitAddItem = () => {
  limitList.value.push({ "index": limitIndex, "type": null, "startRow": 1, "pageSize": 10 })
  limitIndex.value ++
}

const limitDeleteItem = index => {
  limitList.value.splice(index, 1)
}

watch(limitList.value, (newVal, oldVal) => {
  buildQuery()
})


onMounted(() => {
  columnQuery()
  queryTypeOptionSelect()
})

const queryTypeOptionSelect = async () => {
  const res = await $ivyApi.post(API_URLS.dbSqlQueryTypeOption,{})
  whereOption.push(...res.data.where.list)
  groupByOption.push(...res.data.groupBy.list)
  orderByOption.push(...res.data.orderBy.list)
  limitOption.push(...res.data.limit.list)
  columnOption.push(...res.data.column.list)
}

const columnOptionList = reactive([])

const columnQuery = async () => {
  const res = await $ivyApi.post(API_URLS.dbSqlColumnList,currRow.value)
  columnOptionList.push(...res.data)
}

const onUpdateList = () => {
  buildQuery()
}

const buildQuery = async () => {
  const res = await $ivyApi.post(API_URLS.dbSqlBuild,Object.assign(currRow.value, {
    whereList: whereList.value,
    groupByList: groupByList.value,
    orderByList: orderByList.value,
    limitList: limitList.value,
    columnList: columnList.value,
    formatSql: formatSql.value,
  }))

  if(res.code == 200){
    emit('updateSql', res.data)
  }else{
    emit('updateSql', res.message)
  }

}

// 回调信息
// const snackbar = reactive(API_URLS.resultMsg)

// const showMsg = res => {
//   $resultMsg.show(res,snackbar)
// }
</script>

<template>
  <VCard>
    <VCardText>
      <!-- <VSnackbar
        v-model="snackbar.msgVisible"
        location="top"
        :color="snackbar.msgColor"
      >
        {{ snackbar.msgContent }}
      </VSnackbar> -->
      <VCheckbox
        v-model="formatSql"
        label="是否格式化SQL"
      />
      <VTimeline
        side="end"
        align="start"
        truncate-line="both"
        density="compact"
        class="v-timeline-density-compact v-timeline-icon-only"
      >
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">SELECT</span>
          </template>

          <VCard
            class="bg-light-primary"
            variant="text"
          >
            <VCardText>
              <div>
                <VBtn
                  size="small"
                  @click="columnAddItem"
                >
                  新增选项
                </VBtn>
                <SlickList
                  v-model:list="columnList"
                  class="query-slick-list"
                  axis="y"
                  use-drag-handle
                  autoscroll
                  group="column"
                  @update:list="onUpdateList"
                >
                  <SlickItem
                    v-for="(item, i) in columnList"
                    :key="item.index"
                    class="query-slick-item v-card--variant-elevated"
                    :index="i"
                  >
                    <VRow>
                      <VCol cols="1">
                        <DragHandle>
                          <VIcon
                            icon="tabler-list"
                            style="cursor: move;font-size: 40px;"
                          />
                        </DragHandle>
                      </VCol>
                      <VCol cols="6">
                        <VAutocomplete
                          v-model="item.column"
                          label="列名"
                          :items="columnOptionList"
                          clearable
                        />
                      </VCol>
                      <VCol cols="4">
                        <VAutocomplete
                          v-model="item.type"
                          label="类型"
                          :items="columnOption"
                          clearable
                        />
                      </VCol>
                      <VCol cols="1">
                        <VIcon
                          icon="tabler-trash"
                          class="sql-icon-delete"
                          @click="columnDeleteItem(i)"
                        />
                      </VCol>
                    </VRow>
                  </SlickItem>
                </SlickList>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>

        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">INTO</span>
          </template>

          <VCard
            class="bg-light-error"
            variant="text"
          >
            <VCardText v-if="false">
              11
            </VCardText>
          </VCard>
        </VTimelineItem>

        <!-- SECTION Interview Schedule -->
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">FROM</span>
          </template>

          <VCard
            class="bg-light-primary"
            variant="text"
          >
            <VCardText v-if="false">
              11
            </VCardText>
          </VCard>
        </VTimelineItem>
        <!-- !SECTION -->

        <!-- SECTION Puma Shoes -->
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">WHERE</span>
          </template>

          <VCard
            class="bg-light-primary"
            variant="text"
          >
            <VCardText>
              <div>
                <VBtn
                  size="small"
                  @click="whereAddItem"
                >
                  新增选项
                </VBtn>
                <SlickList
                  v-model:list="whereList"
                  class="query-slick-list"
                  axis="y"
                  use-drag-handle
                  autoscroll
                  group="where"
                  @update:list="onUpdateList"
                >
                  <SlickItem
                    v-for="(item, i) in whereList"
                    :key="item.index"
                    class="query-slick-item v-card--variant-elevated"
                    :index="i"
                  >
                    <VRow>
                      <VCol cols="1">
                        <DragHandle>
                          <VIcon
                            icon="tabler-list"
                            style="cursor: move;font-size: 40px;"
                          />
                        </DragHandle>
                      </VCol>
                      <VCol cols="6">
                        <VAutocomplete
                          v-model="item.column"
                          label="列名"
                          :items="columnOptionList"
                          clearable
                        />
                      </VCol>
                      <VCol cols="4">
                        <VAutocomplete
                          v-model="item.type"
                          label="类型"
                          :items="whereOption"
                          clearable
                        />
                      </VCol>
                      <VCol cols="1">
                        <VIcon
                          icon="tabler-trash"
                          class="sql-icon-delete"
                          @click="whereDeleteItem(i)"
                        />
                      </VCol>
                    </VRow>
                  </SlickItem>
                </SlickList>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
        <!-- !SECTION -->

        <!-- 👉 Design Review -->
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">GROUP BY</span>
          </template>

          <VCard
            class="bg-light-success"
            variant="text"
          >
            <VCardText>
              <div>
                <VBtn
                  size="small"
                  @click="groupByAddItem"
                >
                  新增选项
                </VBtn>
                <SlickList
                  v-model:list="groupByList"
                  class="query-slick-list"
                  axis="y"
                  use-drag-handle
                  autoscroll
                  group="groupBy"
                  @update:list="onUpdateList"
                >
                  <SlickItem
                    v-for="(item, i) in groupByList"
                    :key="item.index"
                    class="query-slick-item v-card--variant-elevated"
                    :index="i"
                  >
                    <VRow>
                      <VCol cols="1">
                        <DragHandle>
                          <VIcon
                            icon="tabler-list"
                            style="cursor: move;font-size: 40px;"
                          />
                        </DragHandle>
                      </VCol>
                      <VCol cols="6">
                        <VAutocomplete
                          v-model="item.column"
                          label="列名"
                          :items="columnOptionList"
                          clearable
                        />
                      </VCol>
                      <VCol cols="4">
                        <VAutocomplete
                          v-model="item.type"
                          label="类型"
                          :items="groupByOption"
                          clearable
                        />
                      </VCol>
                      <VCol cols="1">
                        <VIcon
                          icon="tabler-trash"
                          class="sql-icon-delete"
                          @click="groupByDeleteItem(i)"
                        />
                      </VCol>
                    </VRow>
                  </SlickItem>
                </SlickList>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
        
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">HAVING</span>
          </template>

          <VCard
            class="bg-light-success"
            variant="text"
          >
            <VCardText v-if="false">
              11
            </VCardText>
          </VCard>
        </VTimelineItem>
        
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">ORDER BY</span>
          </template>

          <VCard
            class="bg-light-success"
            variant="text"
          >
            <VCardText>
              <div>
                <VBtn
                  size="small"
                  @click="orderByAddItem"
                >
                  新增选项
                </VBtn>
                <SlickList
                  v-model:list="orderByList"
                  class="query-slick-list"
                  axis="y"
                  use-drag-handle
                  autoscroll
                  group="orderBy"
                  @update:list="onUpdateList"
                >
                  <SlickItem
                    v-for="(item, i) in orderByList"
                    :key="item.index"
                    class="query-slick-item v-card--variant-elevated"
                    :index="i"
                  >
                    <VRow>
                      <VCol cols="1">
                        <DragHandle>
                          <VIcon
                            icon="tabler-list"
                            style="cursor: move;font-size: 40px;"
                          />
                        </DragHandle>
                      </VCol>
                      <VCol cols="6">
                        <VAutocomplete
                          v-model="item.column"
                          label="列名"
                          :items="columnOptionList"
                          clearable
                        />
                      </VCol>
                      <VCol cols="4">
                        <VAutocomplete
                          v-model="item.type"
                          label="类型"
                          :items="orderByOption"
                          clearable
                        />
                      </VCol>
                      <VCol cols="1">
                        <VIcon
                          icon="tabler-trash"
                          class="sql-icon-delete"
                          @click="orderByDeleteItem(i)"
                        />
                      </VCol>
                    </VRow>
                  </SlickItem>
                </SlickList>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
        
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">LIMIT</span>
          </template>

          <VCard
            class="bg-light-success"
            variant="text"
          >
            <VCardText>
              <div>
                <VBtn
                  size="small"
                  @click="limitAddItem"
                >
                  新增选项
                </VBtn>
                <SlickList
                  v-model:list="limitList"
                  class="query-slick-list"
                  axis="y"
                  use-drag-handle
                  autoscroll
                  group="limit"
                  @update:list="onUpdateList"
                >
                  <SlickItem
                    v-for="(item, i) in limitList"
                    :key="item.index"
                    class="query-slick-item v-card--variant-elevated"
                    :index="i"
                  >
                    <VRow>
                      <VCol cols="1">
                        <DragHandle>
                          <VIcon
                            icon="tabler-list"
                            style="cursor: move;font-size: 40px;"
                          />
                        </DragHandle>
                      </VCol>
                      <VCol cols="4">
                        <VAutocomplete
                          v-model="item.type"
                          label="类型"
                          :items="limitOption"
                          clearable
                        />
                      </VCol>
                      <VCol cols="3">
                        <VTextField
                          v-model="item.startRow"
                          label="startRow"
                          clearable
                        />
                      </VCol>
                      <VCol cols="3">
                        <VTextField
                          v-model="item.pageSize"
                          label="pageSize"
                          clearable
                        />
                      </VCol>
                      <VCol cols="1">
                        <VIcon
                          icon="tabler-trash"
                          class="sql-icon-delete"
                          @click="limitDeleteItem(i)"
                        />
                      </VCol>
                    </VRow>
                  </SlickItem>
                </SlickList>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
      </VTimeline>
    </VCardText>
  </VCard>
</template>

<style scoped>
.timeline-bg-white {
  background-color: #fff;
  text-align: center;
}

.query-slick-list {
  padding-block: 4px;
  padding-inline: 0;
}

.query-slick-item {
  z-index: 2500;
  padding: 8px;
  margin-block: 8px;
  margin-inline: 0;
}

.sql-icon-delete {
  cursor: pointer;
  font-size: 40px;
  padding-inline-end: 8px;
}
</style>
